<template>
    <div class="app-container">
        <el-col :span="18" :offset="3" :xs="24">
            <el-card class="Car_application_edit" v-if="editFlag">
                <div slot="header" class="clearfix">
                    <span>用车申请</span>
                </div>
                <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="申请部门" prop="department" filterable>
                                <el-select v-model="form.department" placeholder="请选择申请部门" filterable>
                                    <el-option v-for="dict in departmentOptions" :key="dict.deptId" :label="dict.deptName"
                                        :value="dict.deptId"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="申请人" prop="partyId" filterable>
                                <el-select v-model="form.partyId" placeholder="请选择申请人" filterable>
                                    <el-option v-for="dict in partyIdOptions" :key="dict.partyId" :label="dict.firstName"
                                        :value="dict.partyId"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="20">
                            <el-form-item label="用车事由" prop="purpose">
                                <el-input v-model="form.purpose" type="textarea" placeholder="请输入内容" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="始发地点" prop="fromLocation">
                                <el-input v-model="form.fromLocation" placeholder="请输入始发地点" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="目的地" prop="toLocation">
                                <el-input v-model="form.toLocation" placeholder="请输入目的地" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="用车日期" prop="startDate">
                                <el-date-picker clearable v-model="form.startDate" type="datetime"
                                    value-format="yyyy-MM-dd HH:mm:ss" default-time="00:00:00" placeholder="请选择用车日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="返回日期" prop="endDate">
                                <el-date-picker clearable v-model="form.endDate" type="datetime"
                                    value-format="yyyy-MM-dd HH:mm:ss" default-time="00:00:00" placeholder="请选择返回日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="车辆类型" prop="carType">
                                <el-input v-model="form.carType" placeholder="请输入车辆类型" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="车辆数量" prop="carNumber">
                                <el-input-number v-model="form.carNumber" placeholder="请输入车辆数量" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="指定驾驶员" prop="driver">
                                <el-input v-model="form.driver" placeholder="请输入指定驾驶员" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="20">
                            <el-form-item label="备注" prop="remark">
                                <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="审批人" prop="approver">
                                <LoadUserSelect :placeholder="'请选择审批人'" @getSelectedCourt="getSelectedApprover">
                                </LoadUserSelect>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item size="large" align="center">
                                <el-button type="primary" @click="saveForm">保 存</el-button>
                                <el-button type="primary" @click="submitForm">提 交</el-button>
                                <el-button type="danger" @click="close">关闭</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-card>

            <el-card class="Car_application_detail" v-if="detailFlag">
                <div slot="header" class="clearfix">
                    <span>用车申请</span>
                    <el-button v-if="applyFlag" style="float: right; padding: 3px 0" type="text"
                        @click="edit">编辑</el-button>
                </div>
                <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="申请部门" prop="department">
                                <span>{{ departmentFormat(form) }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="申请人" prop="partyId">
                                <span>{{ personFormat(form) }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="用车事由" prop="purpose">
                                <span>{{ form.purpose }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="始发地点" prop="fromLocation">
                                <span>{{ form.fromLocation }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="目的地" prop="toLocation">
                                <span>{{ form.toLocation }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="用车日期" prop="startDate">
                                <span>{{ form.startDate }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="返回日期" prop="endDate">
                                <span>{{ form.endDate }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="车辆类型" prop="carType">
                                <span>{{ form.carType }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="车辆数量" prop="carNumber">
                                <span>{{ form.carNumber }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="指定驾驶员" prop="driver">
                                <span>{{ form.driver }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="20">
                            <el-form-item label="备注" prop="remark">
                                <span>{{ form.remark }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="审批状态" prop="flowStatus">
                                <span>{{ flowStatusFormat(form) }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="更新时间" prop="lastUpdatedStamp">
                                <span>{{ form.lastUpdatedStamp }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24" v-if="applyFlag">
                            <el-form-item size="large" align="center">
                                <el-button type="primary" @click="saveForm">保 存</el-button>
                                <el-button type="primary" @click="submitForm">提 交</el-button>
                                <el-button type="danger" @click="close">关闭</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-card>
            <!-- 审批组件 -->
            <approve v-if="approveFlag"></approve>
        </el-col>
    </div>
</template>

<script>
import LoadUserSelect from "@/components/LoadUserSelect";
// person enum api
import { getPersonEnum } from "@/api/ehr/person";
import { addCar_application, updateCar_application, approvalCar_application } from "@/api/ehr/car_application";
import { getBusinessLog } from "@/api/busi/log";
import { getProcessVariables } from "@/api/workflow/definition";
// 审批组件
import Approve from "@/components/Approve";

export default {
    components: { LoadUserSelect, Approve },
    name: "Car_application_apply",
    data() {
        return {
            // 遮罩层
            loading: true,
            // 人员字典
            personOptions: [],
            // 申请人业务字典
            partyIdOptions: [],
            // 申请部门业务字典
            departmentOptions: [],
            // 审批状态业务字典
            flowStatusOptions: [],
            // 操作标识,用于区分是新增还是修改
            updateFlag: false,
            // 操作标识,用于区分是详情
            detailFlag: false,
            // 操作标识,用于区分编辑状态
            editFlag: true,
            // 业务申请标识
            applyFlag: true,
            // 业务审批标识
            approveFlag: false,

            // 表单参数
            form: {},
            // 表单校验
            rules: {
                partyId: [
                    { required: true, message: "申请人不能为空", trigger: "change" }
                ],

                department: [
                    { required: true, message: "申请部门不能为空", trigger: "change" }
                ],

                startDate: [
                    { required: true, message: "用车日期不能为空", trigger: "blur" }
                ],

                carType: [
                    { required: true, message: "车辆类型不能为空", trigger: "blur" }
                ],

                carNumber: [
                    { required: true, message: "车辆数量不能为空", trigger: "blur" }
                ],

            }
        };
    },
    created() {
        this.reset();
        // 为申请时间默认赋值
        this.form.applyDate = this.parseTime(
            new Date(),
            "{y}-{m}-{d} {h}:{i}:{s}"
        );
        // 为申请人默认值
        this.form.partyId = this.$store.state.user.partyId;
        // 审批人默认值
        this.form.approver = this.$store.state.user.defaultApprover;
        // 人员字典
        getPersonEnum().then((response) => {
            this.personOptions = response.data;
        });
        // 申请人业务字典
        this.getEntityDicts("person:partyId:firstName").then((response) => {
            this.partyIdOptions = response.data;
        });
        // 申请部门业务字典
        this.getEntityDicts("SysDept:deptId:deptName").then((response) => {
            this.departmentOptions = response.data;
        });
        // 审批状态业务字典
        this.getEnumDicts("FLOW_STATUS").then((response) => {
            this.flowStatusOptions = response.data;
        });
        var procInsId = this.$route.query && this.$route.query.procInsId;
        if (procInsId) {
            this.editFlag = false;
            this.detailFlag = true;
            // 业务申请标识
            this.applyFlag = false;
            // 审批标识
            this.approveFlag = true;

            // 获取任务ID
            var taskId = this.$route.query && this.$route.query.taskId;
            // 获取表单参数
            this.getApproveFormParams(taskId, procInsId);
        };
    },
    computed: {
        userInfo() {
            return this.$store.state.user; //当前登录用户信息
        },
    },
    methods: {
        // 获取审批表单变量
        getApproveFormParams(taskId, procInsId) {
            // 1.优先从工作流的参数中获取表单信息,流程任务重获取变量表单
            if (taskId) {
                getProcessVariables(taskId).then((res) => {
                    this.form = res.data.businessMap;
                });
            } else {
                // 2.从业务流水表获取工作流表单参数
                getBusinessLog(procInsId).then((response) => {
                    if (response.data) {
                        this.form = JSON.parse(response.data.busiContentJson);
                    }
                });
            }
        },

        // 审批人选择赋值
        getSelectedApprover(e) {
            this.form.approver = e;
        },
        // 人员字典转换
        personFormat(row, column) {
            let val = null;
            this.personOptions.forEach((item, index) => {
                if (row.partyId === item.partyId) {
                    val = item.name;
                }
            });
            return val;
        },
        // 审批人字典转换
        approverFormat(row, column) {
            let val = null;
            this.personOptions.forEach((item, index) => {
                if (row.approver === item.userId + "") {
                    val = item.firstName;
                }
            });
            return val;
        },
        partyIdFormat(row, column) {
            let val = null;
            this.partyIdOptions.forEach((item, index) => {
                if (row.partyId === item.partyId) {
                    val = item.firstName;
                }
            });
            return val;
        },
        departmentFormat(row, column) {
            let val = null;
            this.departmentOptions.forEach((item, index) => {
                if (row.department === item.deptId) {
                    val = item.deptName;
                }
            });
            return val;
        },
        flowStatusFormat(row, column) {
            let val = null;
            this.flowStatusOptions.forEach((item, index) => {
                if (row.flowStatus === item.enumCode) {
                    val = item.description;
                }
            });
            return val;
        },

        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                applyId: null,
                partyId: null,
                department: null,
                purpose: null,
                fromLocation: null,
                toLocation: null,
                startDate: null,
                endDate: null,
                carType: null,
                carNumber: null,
                driver: null,
                remark: null,
                statusId: null,
                flowInstId: null,
                flowStatus: null,
                approver: null,
                lastUpdatedStamp: null,
                lastUpdatedTxStamp: null,
                createdStamp: null,
                createdTxStamp: null
            };
            //this.resetForm("form");
        },

        /** 保存按钮 */
        saveForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.loading = true;
                    if (this.form.applyId != null && this.updateFlag) {
                        updateCar_application(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                        });
                    } else {
                        addCar_application(this.form).then(response => {
                            this.form.applyId = response.data.applyId;
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                        });
                    }
                    this.loading = false;

                    this.editFlag = false;
                    this.detailFlag = true;
                }
            });
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.loading = true;

                    approvalCar_application(this.form).then((response) => {
                        this.$modal.msgSuccess("申请提交成功！");
                        this.open = false;
                    });
                    this.loading = false;

                    this.close();
                }
            });
        },

        /** 编辑 */
        edit() {
            this.editFlag = true;
            this.detailFlag = false;
        },
        resetForm() {
            this.$refs['form'].resetFields()
        },
        close() {
            this.$tab.closePage();
        },

    }
};
</script>
